<template>
	<view class="page-videoDetail">
		<go-back />
		<!-- 视频 开始 -->
		<view class="video-container">
			<video controls object-fit="contain" :show-mute-btn="true" :enable-play-gesture="true" :poster="detailInfo.img" :src="detailInfo.video_url"
			 :enable-danmu="isOpenDanmu" :danmu-list="danmuList" style="width:100%;height: 95%;" @error="videoError" @play="handlePlay"
			 @timeupdate="timeupdate" id="myVideo" />
			<!-- <image src="../../static/icons/play.png" mode="" class="video-play"/> -->
		</view>
		<!-- 视频 结束 -->
		<view class="nav-wrap">
			<scroll-view scroll-x class="bg-white nav text-center custom-nav">
				<view class="cu-item" :class="{'active cur':index===TabCur}" v-for="(item,index) in TabList" :key="index" @tap="tabSelect(index)">
					{{item}} <text v-if="index===1">({{commentList.length}})</text>
				</view>
			</scroll-view>
		</view>
		<!-- tab内容 -->
		<view class="tab-content">
			<view class="padding-lr-sm" v-if="TabCur === 0">
				<view class="video-info" v-if="detailInfo.id">
					<view class="video-title text-cut margin-bottom-xs">{{detailInfo.title}}</view>
					<view class="text-666 flex align-center text-xs margin-bottom-sm">
						<view class="margin-right-xs">{{detailInfo.views_count}}人观看</view>
						<view>{{detailInfo.create_time}}</view>
					</view>
					<view class="flex justify-between align-start margin-bottom-sm">
						<view class="flex align-start">
							<view class="flex flex-direction align-center">
								<button class="cu-btn custom-share-btn" @click="handleCollect">
									<image src="/static/icons/like-active.png" mode="widthFix" v-if="!!detailInfo.collect" />
									<image src="/static/icons/like.png" mode="widthFix" v-else />
								</button>
								<view class="text-xs text-666">{{detailInfo.collects_count}}</view>
							</view>
							<!-- 弹幕 -->
							<view class="flex flex-direction align-center margin-lr-sm">
								<button class="cu-btn custom-share-btn" @click="handleToggleDanmu">
									<image src="/static/icons/dan.png" mode="widthFix" v-if="isOpenDanmu" />
									<image src="/static/icons/dan-close.png" mode="widthFix" v-else />
								</button>
								<view class="text-xs text-666">{{detailInfo.danmus_count}}</view>
							</view>
							<view class="flex flex-direction align-center">
								<button class="cu-btn custom-share-btn" @click="handleMore">
									<image src="/static/icons/more.png" mode="widthFix"></image>
								</button>
							</view>
						</view>
						<view class="flex align-center">
							<button class="cu-btn custom-share-btn" @click="createPoster">
								<image src="/static/images/WeChat-friend-01.png" mode="widthFix"></image>
							</button>
							<button open-type="share" class="cu-btn round custom-share-btn text margin-left-sm">
								<image src="/static/icons/wechat.png" mode="widthFix"></image>
								<text class="margin-left-xs">分享群友</text>
							</button>
						</view>
					</view>
					<view class="flex justify-between align-center">
						<view class="flex align-center">
							<view class="margin-right-xs">
								<image class="cu-avatar round custom-avatar" :src="detailInfo.avatar" />
							</view>
							<view>{{detailInfo.nickname}}</view>
						</view>
						<view>
							<button class="cu-btn round custom-btn-follow" :loading="attentionLoading">
								<view @click="handleUnAttention" v-if="!!detailInfo.attention">
									取消关注
								</view>
								<view @click="handleAttention" v-else>
									<text class="cuIcon-add"></text>关注
								</view>
							</button>
						</view>
					</view>
					<!-- 推荐视频 -->
					<view class="page-video">
						<h-line title="推荐视频" />
						<video-list :list="recommendList" />
					</view>

					<view style="height:120rpx" />

					<!-- 发布弹幕 -->
					<view class="dan-wrap padding-lr-sm" :style="{bottom:`${InputBottom}px`}">
						<view class="input-wrap">
							<view class="dan-icon">
								<text style="font-size:18upx;">弹</text>
							</view>
							<input placeholder="输入弹幕内容" class="input-cont" placeholder-style="color:#999999;font-size:24rpx"
							 :adjust-position="false" @focus="InputFocus" @blur="InputBlur" confirm-type="send" v-model="danmuValue"
							 @confirm="handleSendDanmu" />
						</view>
						<view>
							<button class="cu-btn round margin-left-xs" style="height:60upx;background-color: #E24E47;color: #fff;" @click="handleSendDanmu">
								发布
							</button>
						</view>
					</view>
				</view>
			</view>
			<view v-else-if="TabCur === 1" class="padding-lr-sm">
				<comment-list :list.sync="commentList" :videoId="id" />
			</view>
		</view>
		<!-- tab内容 结束 -->

		<!-- 海报 -->
		<my-poster ref="hchPoster" :canvasFlag.sync="canvasFlag" :posterObj.sync="posterData" />
	</view>
</template>

<script>
	import HLine from '@/components/HLine'
	// import MyPoster from './components/MyPoster'
	import MyPoster from '@/components/MyPoster'
	import VideoList from './components/VideoList'
	import CommentList from './components/CommentList'
	export default {
		components: {
			HLine,
			MyPoster,
			VideoList,
			CommentList
		},
		data() {
			return {
				id: 0,
				detailInfo: {},
				TabCur: 0,
				TabList: ['视频', '评论'],
				videoPoster: "https://hansu-1253325863.cos.ap-shanghai.myqcloud.com/weixinVideo/%E6%88%AA%E5%B1%8F2020-06-03%E4%B8%8A%E5%8D%888.35.03.png",
				danmuList: [],
				posterData: {},
				canvasFlag: true,
				recommendList: [],
				commentList: [],
				isFirstPlay: true, //第一次点击播放
				attentionLoading: false,
				videoContext: "", //视频信息
				danmuValue: "", //弹幕
				isOpenDanmu: true, //是否开启弹幕
				isFold: false,
				InputBottom: 0,
				time: 0, //发送弹幕的时间
			};
		},
		methods: {
			async getVideoInfo(id) {
				this.$h.showLoading()
				Promise.all([this.getRecommendList(), this.getVideoDetail(id), this.getDanmus(id)]).then(
					res => {
						this.$h.hideLoading()
						this.recommendList = res[0]
						this.detailInfo = res[1][0]
						this.danmuList = res[2].danmus
						return res
					})
			},
			async getRecommendList() {
				let query = {
					is_recommend: 1,
					page: 1,
					size: 10,
					type: 2
				}
				let {
					data
				} = await this.$h.api.videoModel.getSearch(query)
				return data.data
			},
			async getCommentList(id) {
				let query = {
					id
				}
				let {
					data
				} = await this.$h.api.videoModel.getComment(query)
				return data.comments.map(item => ({
					...item,
					isShowMore: false
				}))
			},
			async getVideoDetail(id) {
				let query = {
					id
				}
				let {
					data
				} = await this.$h.api.videoModel.getVideoDetail(query)
				return data
			},
			async getDanmus(id) {
				let query = {
					id
				}
				let {
					data
				} = await this.$h.api.videoModel.getDanmus(query)
				return data
			},
			async tabSelect(index) {
				if (index === 1) {
					this.commentList = await this.getCommentList(this.id)
					this.TabCur = index
				} else {
					await this.getVideoInfo(this.id)
					this.TabCur = index
				}
			},
			async handlePlay() {
				if (!this.isFirstPlay) {
					return
				}
				let query = {
					video_id: this.detailInfo.id
				}
				let {
					code
				} = await this.$h.api.videoModel.postViewVideo(query)
				if (code === 1) {
					this.isFirstPlay = false
				}
			},
			async handleCollect() {
				let isCollect = !!this.detailInfo.collect
				let api = isCollect ? this.$h.api.videoModel.postVideoUnCollect : this.$h.api.videoModel.postVideoCollect
				let query = {
					id: this.detailInfo.id
				}
				let {
					code
				} = await this.waitingLoading(api, true)(query)
				if (code == 1) {
					this.$set(this.detailInfo, 'collect', isCollect ? 0 : 1)
					let info = this.$h.utils.deepClone(this.detailInfo)
					let counts = info.collects_count
					this.$set(this.detailInfo, 'collects_count', isCollect ? --counts : ++counts)
				}
			},
			async handleAttention() {
				//改变button的loading状态
				this.attentionLoading = true
				let query = {
					attention_user_id: this.detailInfo.user_id
				}
				let {
					code
				} = await this.$h.api.userModel.postLike(query)
				if (code === 1) {
					this.attentionLoading = false
					this.$set(this.detailInfo, "attention", 1)
				}
			},
			async handleUnAttention() {
				this.attentionLoading = true
				let query = {
					attention_user_id: this.detailInfo.user_id
				}
				let {
					code
				} = await this.$h.api.userModel.postUnLike(query)
				if (code === 1) {
					this.attentionLoading = false
					this.$set(this.detailInfo, "attention", 0)
				}
			},
			handleMore() {
				this.$h.showActionSheet(['举报']).then(index => {
					// console.log(index)
				})
			},
			handleToggleDanmu() {
				this.isOpenDanmu = !this.isOpenDanmu
			},
			videoError(err) {
				console.log("err", err)
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			//生成随机颜色
			getRandomColor() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			},
			//发送弹幕
			async handleSendDanmu() {
				let color = this.getRandomColor()
				let query = {
					video_id: this.detailInfo.id,
					time: ~~this.time,
					text: this.danmuValue,
					color
				}
				let {
					code
				} = await this.$h.api.videoModel.postDanmu(query)
				if (code === 1) {
					this.videoContext.sendDanmu({
						text: this.danmuValue,
						color
					});
					this.danmuValue = '';
					//获取弹幕列表
				}
			},
			//生成海报
			async createPoster() {
				//增加分享朋友圈次数
				this.$h.api.videoModel.postShareVideo({
					video_id: this.id,
					share_type: "wecircle"
				})

				let query = {
					id: this.id,
					type: "video"
				}
				let {
					data,
					code
				} = await this.$h.api.codeModel.getWXCode(query)
				if (code === 1) {
					this.canvasFlag = false
					let {
						avatar,
						head_img,
						title,
						nickname,
						code_img
					} = data.data
					if (!avatar || !nickname) {
						this.$h.toast("请先完善个人信息")
						return
					}
					this.posterData = {
						avatar,
						url: head_img, //商品主图
						title, //标题
						userInfo: nickname,
						subTitle: "我刚分享了",
						code: code_img, //小程序码
					}
					this.$nextTick(function() {
						this.$refs.hchPoster.createCanvasImage(); //调用子组件的方法
					})
				}
			},
			//获取当前视频播放的时间
			timeupdate(e) {
				this.time = e.detail.currentTime
			}
		},
		async onLoad({
			id,
			type
		}) {
			this.id = id
			this.getVideoInfo(id) //获取详细信息
			this.commentList = await this.getCommentList(id) //获取评论数
			//首页点击评论，直接展示评论详情
			if (type === "comment") {
				this.TabCur = 1
			}
			uni.$on('updateComment', async () => {
				this.commentList = await this.getCommentList(id)
			})
		},
		onReady() {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo', this)
			// console.log(this.videoContext)
			// #endif
		},
		beforeDestroy() {
			uni.$off("updateComment")
		},
		//分享
		onShareAppMessage(res) {
			let query = {
				video_id: this.detailInfo.id,
				share_type: "wechat"
			}
			this.$h.api.videoModel.postShareVideo(query)

			return {
				title: this.detailInfo.title,
				imageUrl: this.detailInfo.img,
				path: `/pages/home/home?type=share_userVideo&id=${this.detailInfo.id}`,
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.page-videoDetail {
		box-sizing: border-box;
		position: relative;

		.video-container {
			width: 100%;
			height: 520rpx;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 20;
			.video-play {
				position: absolute;
				bottom: 10rpx;
				left: 20rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}

		// tab
		.nav-wrap {
			position: fixed;
			top: 520rpx;
			left: 0;
			right: 0;
			z-index: 20;
			height: 90rpx;
			display: flex;
			align-items: center;

			.nav.custom-nav {
				margin-bottom: 60rpx;

				.cu-item {
					line-height: 120rpx;
					padding: 0;
					margin: 0 40rpx;
					color: #3F3F41;

					&.active {
						color: $mainColor;
					}
				}
			}
		}

		.tab-content {
			margin-top: 610rpx;

			.video-info {
				.title {
					font-size: 28rpx;
					color: #3F3F41;
				}

				.cu-btn.custom-share-btn {
					width: 44rpx;
					height: 44rpx;
					padding: 0;
					background-color: rgba(0, 0, 0, 0);
					margin-bottom: 8rpx;

					& image {
						width: 40rpx;
						height: 40rpx;
					}

					&.text {
						width: 160rpx;
						font-size: 18rpx;
						color: #fff;
						background-color: #09BB07;
						padding: 0 16rpx;

						image {
							width: 36rpx;
						}
					}
				}

				.cu-avatar.custom-avatar {
					width: 80rpx;
					height: 80rpx;
				}

				//评论弹幕
				.dan-wrap {
					position: fixed;
					bottom: 0;
					left: 0;
					right: 0;
					z-index: 20;
					height: 113rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background: rgba(255, 255, 255, 1);
					padding-bottom: 15rpx;

					// box-shadow:0px 8px 13px 1px rgba(51, 51, 51, 0.35);
					.input-wrap {
						flex: 1;
						display: flex;
						align-items: center;
						height: 60upx;
						background: rgba(237, 237, 237, 1);
						border-radius: 15px;
						position: relative;

						.input-cont {
							height: 100%;
							padding-left: 60upx;
						}

						.dan-icon {
							position: absolute;
							top: 50%;
							left: 10upx;
							width: 40upx;
							height: 40upx;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-top: -20upx;
							border-radius: 50%;
							background-color: #E24E47;
							color: #fff;
						}
					}
				}

			}
		}
	}
</style>
